<template>
    <a-upload
        class="file-upload"
        list-type="text"
        :file-list="fileList"
        :multiple="true"
        :accept="accept"
        :remove="handleRemove"
        :before-upload="beforeUpload"
        :customRequest="handleUpload"
    >
    <!-- :accept="accept" -->

    <slot v-if="!useDefaultSlot"></slot>
    <div class="file-warpper" v-if="useDefaultSlot">
        <div class="item">
            <div v-if="!src" class="no-file">
                <a-button type="primary">
                <!-- <a-icon class="icon" :type="loading ? 'loading' : 'upload'" /> -->
                上传
                </a-button>
            </div>
            <a-icon v-if="src && !srcIsImage" :type="iconType" class="other" />
        </div>
    </div>
  </a-upload>
  <!-- </span> -->
</template>
<script>
import { testFileType } from "../../../modules/common/service/zsFiles.js";
import { filesUpload } from "@/api/common";

// 文件上传组件
export default {
  name: "FileUpload",
  props: {
    src: {
        type: String,
    },
    files:{
        type: Array,
        default: ()=>[]
    },
    /** audio/*,video/*,image/* */
    accept: {
        type: String,
        default: () => ".jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx,.pdf,.ppt,.pptx,.rar,.zip,.7z",
    },
    /** 是否私有文件 */
    isPrivate: Boolean,
    bizType: Number,
  },
  created() {
  },
  watch:{
    files(list) {
        this.fileList.splice(0);
        list.forEach((item) => {
            this.fileList.push({
                uid: item.fileId,
                name: item.fileName,
                status: 'done',
                url: item.fileUrl,
            });
        });
    }
  },
  computed: {
    useDefaultSlot() {
        return this.$slots && this.$slots.default ? false : true;
    },
    srcIsImage() {
        return testFileType(this.src).isImage;
    },
    iconType() {
        const typeRes = testFileType(this.src);
        if (typeRes.isTxt) return "file-text";
        if (typeRes.isExcel) return "file-excel";
        if (typeRes.isPDF) return "file-pdf";
        if (typeRes.isPPT) return "file-ppt";
        if (typeRes.isWord) return "file-word";
        if (typeRes.isVideo) return "play-square";
        return "file";
    },
  },
  data() {
    return {
        // 供上传页面渲染已上传文件列表使用
        fileList: [],
        fileUrl: null,
        loading: false,
    };
  },
  methods: {
    handleRemove(file) {
        const index = this.fileList.indexOf(file);
        this.fileList.splice(index, 1);
        this.$emit("remove", file, this.getFileList());
    },
    beforeUpload(file) {
        let fileFormart = file.name.split('.')[file.name.split(".").length - 1 ];
        let isLt50M = file.size / 1024 / 1024 < 50;
        if (this.accept.indexOf(fileFormart) > -1 && isLt50M) {
            return true;
        } else {
            this.$message.error('请上传小于 50MB 的jpg、png、Word、Excel、PowerPoint、PDF、RAR、ZIP及7z文件！');
            return false;
        }
    },
    handleUpload(fileParam) {
        this.loading = true;
        const param = new FormData();
        param.append('file', fileParam.file)
        // 添加上传文件资源类型 
        param.append('resourceBizType', this.bizType);
        // this.$emit('beforeUpload', param);
        filesUpload(param)
        .then((result) => {
            
            this.loading = false;
            const fileListItem = {
                uid: result.fileId,
                name: fileParam.file.name,
                status: 'done',
                url: result.fileUrl,
            };
            this.fileList.push(fileListItem);
            this.$emit("ok", result, this.getFileList());
            this.$listeners.change && this.$listeners.change();
        })
        .catch((error) => {
            console.log("上传失败！", error);
            this.loading = false;
            this.$emit("cancel", error);
        });
    },
    // 返回全部文件列表
    getFileList(){
        const list =  this.fileList.map(i =>{
            return  {
                fileId: i.uid,
                fileName: i.name,
                fileUrl: i.url,
            };
        })
        return list;
    },
    // 清空文件列表
    clear() {
        this.fileList.splice(0);
    },
  },
};
</script>